iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0

前言

昨天引用了許多函式庫,今天就來使用他們所提供的功能,真正來實作chatroom內容吧~~

Spinner

RegisterViewController

spinner.show(in: view)

首先我們在畫面加上spinner的元件。

接著在之前的程式中,加上更多判斷spinner的邏輯。
當該使用者存在時,就把spinner dismiss掉。

DatabaseManager.shared.userExists(with: email, completion: { [weak self] exists in
    guard let strongSelf = self else { // prevent from memory leak
        return
    }

    DispatchQueue.main.async {
        strongSelf.spinner.dismiss()
    }

    guard !exists else {
        strongSelf.alertUserLoginError(message: "user for that email address already exists")
        return
    }

    FirebaseAuth.Auth.auth().createUser(withEmail: email, password: password, completion: { authResult, error in

        guard authResult != nil, error == nil else {
            print("error creating user")
            return
        }

        // data entry
        DatabaseManager.shared.insertUser(with: ChatAppUser(firstName: firstname,
                                                            lastName: lastname,
                                                            emailAddress: email))
        // todo: flow check
        strongSelf.navigationController?.dismiss(animated: true, completion: nil)
    })
})

table view

ConversationViewController

我們將table view的邊線,在subview load進來時顯示。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    tableView.frame = view.bounds
}

聊天

終於進到聊天的view controller了!

ChatViewController

首先,先引入函式庫。其中MessageKit是一個處理跟聊天相關所有行為的函式庫。

import UIKit
import MessageKit

資料結構

struct Message: MessageType {
    var sender: SenderType
    var messageId: String
    var sentDate: Date
    var kind: MessageKind
}

struct Sender: SenderType {
    var photoURL: String // URL
    var senderId: String
    var displayName: String
}

main view controller

class ChatViewController: MessagesViewController {

    // collection of messages
    private var messages = [Message]()
    
    private let selfSender = Sender(photoURL: "",
                                    senderId: "1",
                                    displayName: "Joe Smith")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        messages.append(Message(sender: selfSender,
                                messageId: "1",
                                sentDate: Date(),
                                kind: .text("Hello world message hello world message hello world message")))
        
        messagesCollectionView.messagesDataSource = self
        messagesCollectionView.messagesLayoutDelegate = self
        messagesCollectionView.messagesDisplayDelegate = self
    }
    

}

Extension

每次都會需要新增,因為我們在上面有將messagesDataSource, messagesLayoutDelegate, messagesDisplayDelegate指派給自己。
因此需要新增以下幾個方法:

  1. 目前的sender回傳為自己。
  2. 每個item定義為messageKit中的section
  3. 每個section的數量
extension ChatViewController: MessagesDataSource, MessagesLayoutDelegate, MessagesDisplayDelegate {
    func currentSender() -> SenderType {
        return selfSender
    }
    
    func messageForItem(at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView) -> MessageType {
        // MessageKit use section to separate every single message
        return messages[indexPath.section] // a single section, per message
    }
    
    func numberOfSections(in messagesCollectionView: MessagesCollectionView) -> Int {
        return messages.count
    }
    
    
}

結語

赫然發現測試時每次都要把app從模擬器中卸載再重裝,完全是因為忘記把logout的功能加上去XDD
那明天就來實作這邊吧!

若上述內容有誤或可以改進的部分,歡迎留言以及提出任何指教~
謝謝 (´・∀・`)


上一篇
Day#20 Dependencies & conversation UI
下一篇
Day#22 一直忘記實作的Logout
系列文
來寫看看app好了! Swift探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言